//@flow

/**
 * 请求分析器行
 * 支持请求参数的复制、请求链接的复制
 */

import React, { Component } from 'react';
import { 
    StyleSheet,
    View,
    Text,
    Clipboard,
    DeviceEventEmitter,
    EmitterSubscription,
 } from 'react-native';
import { Card, } from "antd-mobile-rn";
import { DataProps,ReqStatus,ReqMethod } from "./requestAnalyzer";
import * as Noti from "./requestAnalyzer.contant";
type FuncProps = {
    title : string,//功能标题：如复制请求
    action : (data:DataProps)=>{},//功能事件
}
type Props = {
    data: DataProps
}
type State = {
    status : ReqStatus
}
export class RequestAnalyzerItem extends Component <Props,State>{
    /**初始化state */
    state:State = {
        status : this.props.data.status
    }
    /**监听器 */
    _statusListener : EmitterSubscription;
    /**渲染不同状态指示灯 */
    renderStatus(status:ReqStatus){
        let color : string ;
        switch(status){
            case 'fail':
                color = 'red'
                break;
            case 'success':
                color = 'green'
                break;
            case 'process':
                color = 'gray'
                break;
            default :
                color = 'orange'
                console.log(`unknown status : ${status}`)
        }
        return (
            <View style={[styles.statusLight,{backgroundColor:color}]}></View>
        )
    }
    /**渲染功能按钮
     * 目前支持复制请求：复制格式如下
     * url
     * ======
     * params
     * ======
     * header
     * ======
     * method
     */
    copyToClipboard(data:DataProps){

    }
    /**渲染功能按钮 */
    renderFunc(){
        let funcs :Array<FuncProps> = [
            {
                title : '复制请求',
                action:(data:DataProps)=>{
                    this.copyToClipboard(data)
                }
            }
        ];

        return (
            <View style={styles.funcContainer}>
                {
                    funcs.map(item=>{
                        return <Text onPress={()=>{item.action(this.props.data)}}>{item.title}</Text>
                    })
                }
            </View>
        )
    }
    /**添加通知：监听请求结果 */
    // addListener(){
    //     this._statusListener=DeviceEventEmitter.addListener(Noti.UPDATE_RESPONSE_BACK_NOTI,(data)=>{
    //         // let data : DataProps =
    //         let res:DataProps = data;
    //         res.status = (data.response.status>=200 && res.response.status<300) ? 'success':'fail'
    //         this.updateStatus(res.status)
    //     })
    // }
    /**修改当前请求的状态 */
    // updateStatus(status:ReqStatus){
    //     this.setState({status:status})
    // }
    // /**移除监听 */
    // removeListener(){
    //     this._statusListener.remove()
    // }
    // /**生命周期 */
    // componentDidMount(){
    //     this.addListener()
    // }
    // componentWillUnmount(){
    //     this.removeListener()
    // }
    /**
     * 渲染头：指示灯 + 功能按钮
     */
    renderHeader(status:ReqStatus,data:DataProps){
        return (
            <View style={styles.headerContainer}>
                {this.renderStatus(status)}
                {this.renderFunc()}
            </View>
        )
    }
    render(){
        const {data} = this.props;
        let url : string = data.reqUrl;
        let method : ReqMethod = data.method;
        let params : Object = data.params;
        let header : Object = data.header; 
        return (
            <Card >
                <Card.Header title={this.renderStatus(this.state.status)}
                             extra={this.renderFunc()}/>
                <Card.Body>
                    <Text>
                        接口:{url}{'\n'}
                        方法:{method}{'\n'}
                        参数:{
                            Object.keys(params).map(item=>{
                                return `${item}=${params[item]}\n`
                            })
                        }
                        头  :{
                            header!=null ?  Object.keys(header).map(item=>{
                                                return `${item}=${header[item]}\n`
                                            })
                                         :  null
                        }
                        
                    </Text>
                </Card.Body>
            </Card>
        )
    }
}

const styles = StyleSheet.create({
    statusLight : {
        width : 20,
        height : 20,
        borderRadius: 10,
    },
    headerContainer:{
        flexDirection:'row',
        justifyContent: 'space-between',
        paddingVertical: 10,
        paddingVertical:5
    },
    funcContainer:{
        flexDirection:'row',
        justifyContent:'flex-end'
    }
})